<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>学员信息管理</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
</head>
<body>
    <div style="padding: 16px">
      <div class="layui-card">
        <div class="layui-card-body">
          <table
            class="layui-hide"
            id="student-table"
            lay-filter="student-table"
          ></table>
        </div>
      </div>
    </div>

    <!--新增学生的form-->
    <form
      class="layui-form"
      lay-filter="student-form"
      id="student-form"
      action=""
      style="padding: 15px; display: none"
    >
         <!-- ID 字段 -->
      <div class="layui-form-item">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="id"
            value="0"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
            disabled
          />
        </div>
      </div>
         <!-- 姓名 字段 -->
      <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="name"
            placeholder="请输入学生姓名"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
        <!-- 语文 字段 -->
      <div class="layui-form-item">
        <label class="layui-form-label">语文</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="chinese"
            placeholder="语文分数"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
        <!-- 数学 字段 -->
      <div class="layui-form-item">
        <label class="layui-form-label">数学</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="math"
            placeholder=""
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
        <!-- 英语 字段 -->
      <div class="layui-form-item">
        <label class="layui-form-label">英语</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="english"
            placeholder="英语"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
        <!-- 提交按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button
            type="submit"
            class="layui-btn"
            lay-submit
            lay-filter="student-form-btn"
          >
            立即提交
          </button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>

    <!--新增学生的toolbar-->
    <script type="text/html" id="student-toolbar">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="student-toolbar-add">
          新增学生
        </button>
      </div>
    </script>
    <!--编辑学生的toolbar-->
    <script type="text/html" id="student-tool">
      <div class="layui-btn-container">
        <button
          class="layui-btn layui-btn-sm layui-bg-blue"
          lay-event="student-tool-edit"
        >
          编辑
        </button>

        <button
          class="layui-btn layui-btn-sm layui-bg-red"
          lay-event="student-tool-del"
        >
          删除
        </button>
      </div>
    </script>

    <!--学生信息管理标签-->
    <script>
      let use = layui.use(function () {
          var table = layui.table; // 用到了layui的table
          var $ = layui.$;  // $是获取表格数据
          var form = layui.form;  // 用到了layui的form表单

          let user_id = -1;

          <!-- 对表格进行渲染 -->
          table.render({
              elem: "#student-table",   //改成我们对应的表格名称
              id: "student-table",  //改成我们对应的表格名称
              url: "/api/v1/student", // 改成表格获取数据的接口
              height: "full-35", // 最大高度减去其他容器已占有的高度差
              toolbar: "#student-toolbar", //绑定对应的toolbar
              page: true,
              cols: [
                  [
                      //标题栏
                      {field: "id", title: "ID", width: 80, sort: true},
                      {field: "name", title: "姓名", width: 120},
                      {field: "math", title: "数学", width: 120},
                      {field: "english", title: "英语", width: 160},
                      {field: "chinese", title: "语文", width: 120},
                      {
                          fixed: "right",
                          title: "操作",
                          width: 180,
                          align: "center",
                          toolbar: "#student-tool", // 改正确的名字
                      },
                  ],
              ],
          });
          <!-- 点击事件，student-toolbar-add 显示出来 -->
          table.on("toolbar(student-table)", function (obj) {
          if (obj.event === "student-toolbar-add") {
            $("#student-form")[0].reset();
            layer.open({
              type: 1,
              shade: false,
              content: $("#student-form"),
              area: ["50%", "80%"],
            });
            form.render($("#student-form"));
          }
        });
          <!-- 捕捉“立即提交”按钮事件 -->
          form.on("submit(student-form-btn)", function (data) {
          var field = data.field;
          let method, url;
          if (field.id == 0) {
            field.id = null;
            method = "POST";
            url = "/api/v1/student";
          } else {
            method = "PUT";
            url = `/api/v1/student/${field.id}`;
          }
          $.ajax({
            url: url,
            type: method,
            contentType: "application/json",
            headers: {
              "X-CSRF-TOKEN": getCookie("csrf_access_token"),
            },
            data: JSON.stringify(field),
            success: function (res) {
              if (!res.code) {
                layer.closeAll();
                table.reloadData("student-table");
              }
            },
          });
          return false;
        });
          <!-- 修改按钮的事件 -->
          table.on("tool(student-table)", function (obj) {
          if (obj.event === "student-tool-edit") {
            form.val("student-form", obj.data);
            layer.open({
              type: 1,
              shade: false,
              content: $("#student-form"),
              area: ["50%", "80%"],
            });
          } else if (obj.event === "student-tool-del") {
            $.ajax({
              url: `/api/v1/student/${obj.data.id}`,
              type: "DELETE",
              contentType: "application/json",
              headers: {
                "X-CSRF-TOKEN": getCookie("csrf_access_token"),
              },
              success: function (res) {
                if (!res.code) {
                  table.reloadData("student-table");
                }
              },
            });
          }
        });

      });



    </script>
</body>
</html>